<template>
    <div class="banner">
        <el-carousel height="260px">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img :src="item.imgUrl" alt="">
            </el-carousel-item>
        </el-carousel>   
    </div>
   
     
</template>

<script lang="ts" setup name="">
  import {onMounted,ref} from 'vue'
import {reqGetBanner}  from '@/apis/home/index.ts'
//引入轮播图回调函数
import { initSwiper} from "@/utils/swiper"
//获取轮播图数据
const bannerList =ref<any>([])
const getbannerList =async()=>{
    let result =await reqGetBanner()
    bannerList.value= result.result
    
}
onMounted(()=>{
    // 挂载获取轮播图数据
    getbannerList()
  initSwiper(); // 在组件挂载后初始化Swiper

})
</script>

<style scoped lang="scss">
.banner{
    margin: 10px 0 20px 0;
}
</style>